<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单统计</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/echarts/echarts.js"></script>
</head>
<style>
    .l{
        float: left;
    }
    .r{
        float: right;
    }
    .layui-table-cell{
        height: inherit;
        line-height: 20px;
    }
    table tr td{
        border: 1px slategrey solid;
        text-align: center;
        width: 1%;
        line-height: 50px;
    }
</style>
<body style="background-color: #F3F5F7">
<!--title-->
<div style="margin-left: 30px;width: 93%;height: 50px;padding-top: 10px;background-color: #F1F1F1">
    <div>
        <div style="height: 30px; width: 5px;background-color:#009688 " class="l"></div>
        <h3 class="l" style="margin-top: 5px;margin-left: 5px">订单统计</h3>
        <div class="r" style="margin-right: 20px">
            <button type="button" class="layui-btn" onclick="refresh()">刷新</button>
            <button type="button" class="layui-btn" onclick="backOff()">返回</button>
        </div>
    </div>
</div>



<div style="margin-left: 30px;width: 93%;margin-left: 10px;margin-top: 10px;margin-bottom: 10px;">
    <p style="line-height: 50px;background-color: #FFFFFF;padding-left: 10px"><i class="layui-icon">&#xe633;</i><strong>订单类型切换：</strong></p>
    <div style="margin-left: 600px;line-height: 50px">
        <button class="layui-btn" onclick="commodity()" style="margin-right: 30px">商品订单</button>
        <button class="layui-btn" onclick="course()">课程订单</button>
    </div>
</div>
<div style="margin-left: 30px;width: 93%;margin-left: 10px;margin-bottom: 10px; border: 1px #FFFFFF solid;"  >
    <p style="line-height: 50px;background-color: #FFFFFF;padding-left: 10px"><i class="layui-icon">&#xe63c;</i><strong id="order">商品订单量统计</strong></p>
    <div>
        <table>
            <tr id="title">
            </tr>
            <tr id="num">
            </tr>
        </table>
    </div>
</div>
<div style="margin-left: 30px;width: 93%;margin-left: 10px;margin-bottom: 10px;">
    <p style="line-height: 50px;background-color: #FFFFFF;padding-left: 10px"><i class="layui-icon">&#xe629;</i><strong id="orderView">商品订单量统计图</strong></p>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1500px;height:400px;"></div>
</div>




</body>
<script>

    var $;
    var layer;
    layui.use(['layer','jquery'],function(){
        $ = layui.$;
        layer = layui.layer;
    });


    //返回首页
    backOff = function backOff(){
        parent.jumpSystemHome();
    }

    //刷新
    refresh = function refresh(){
        window.location.reload();
    }


    //商品订单
    commodity = function commodity(){
        $('#order').text('商品订单量统计');
        $('#orderView').text('商品订单量统计图');
        var title = [];
        var num = [];
        getOrderNum('/Census/getCommodityOrderNum');

    }

    //课程订单
    course = function course(){
        $('#order').text('课程订单量统计');
        $('#orderView').text('课程订单量统计图');
        var title = [];
        var num = [];
        getOrderNum('/Census/getCourseOrderNum');
    }



    //获取数据
    var title = [];
    var num = [];
    getOrderNum('/Census/getCommodityOrderNum');
    function getOrderNum(url){
        $.ajax({
             url: url
            ,data: {}
            ,dataType: 'json'
            ,async:false
            ,success:function(data){
                var census = data.data;
                title.length = 0;
                num.length = 0;

                $('#title td').remove();
                $('#num td').remove();
                $('#title').append(
                    "<td style='background-color: #F9FBFC'>订单分类</td>"
                )
                $('#num').append(
                    "<td>订单数量</td>"
                )
                var len;
                if(census.length>6){
                    len = 6;
                }else{
                    len = census.length;
                }

                for (var i=0; i<len; i++){
                    $('#title').append(
                        "<td style='background-color: #F9FBFC'>"+census[i].title+"</td>"
                    )
                    $('#num').append(
                        "<td>"+census[i].num+"</td>"
                    )
                    title.push(census[i].title);
                    num.push(census[i].num);
                }
                myChart.setOption(option);
            }
        });
    }


    var myChart = echarts.init(document.getElementById('main'));
    option = {
        xAxis: {
            data: title
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: num
            }
        ]
        ,toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
    };
    myChart.setOption(option);



</script>
</html>